<template>
  <div class="wh-100" style="background-color:#fff;">
    <!--头部-->
    <div class="d-flex-between-center mt-12 px-20" style="height: 50px">
      <div class="d-flex-align-center">
        <div class="fs-16 fw-6" :class="activeTab === 1 ? 'tab-cut' : ''" @click="unitCheckIn(1)">参会单位签到</div>
        <div class="fs-16 fw-6 ml-12" :class="activeTab === 2 ? 'tab-cut' : ''" @click="unitCheckIn(2)">参会学生签到</div>
      </div>
      <div class="flex-1  d-flex-align-center justify-content-end" style="height: 50px;border-bottom:1px solid #ecf0f6">
        <div class="fs-16 fw-7 mr-12" style="color: #519dfb" @click="generateQRCode()">下载签到码</div>
        <Button @click="$router.back()">返回</Button>
      </div>
    </div>
    <!---->
    <!--搜索-->
    <div class="d-flex-between-center mt-12">
      <div>
        <Button @click="bulkCheckIn">批量签到</Button>
        <Button @click="cancelCheckInInBulk">批量未签到</Button>
        <Button @click="download">导出数据</Button>
      </div>
      <div class="d-flex-align-center">
        <Select v-model="queryStatus" style="width:200px">
          <Option value="全部" label="全部状态"></Option>
          <Option value="未处理" label="未处理"></Option>
          <Option value="已签到" label="已签到"></Option>
          <Option value="未签到" label="未签到"></Option>
        </Select>
        <Input class="ml-12" search enter-button="搜索" :placeholder="activeTab === 1 ? '用人单位名称或展位号' : '学生名称或学校'" v-model="queryText" @on-search="search(activeTab)" />
      </div>
    </div>
    <!--表格-->
    <!--学生-->
    <div v-if="activeTab === 2" v-ref-height="abca" style="height: calc(100% - 170px)" class="mt-12">
      <Table :height="abca.value" class="overflow-auto-hidden" ref="stuSelections" :columns="tableColumns" :data="studentList" :loading="loadingStu">
        <template slot-scope="{ row }" slot="schoolProfession">
          {{ row.schoolName }}
          <br />
          {{ row.professionalTitle }}
        </template>
        <template slot-scope="{ row }" slot="contactAddress">
          {{ row.phoneNumber }}
          <br />
          {{ row.email }}
        </template>
        <template slot-scope="{ row }" slot="stustatus">
          <el-link v-if="row.status === 0" type="primary" :underline="false">未处理</el-link>
          <el-link v-if="row.status === 1" type="success" :underline="false">已签到</el-link>
          <el-link v-if="row.status === 2" type="danger" :underline="false">未签到</el-link>
        </template>
        <template slot-scope="{ row }" slot="operation">
          <a style="color:#0087fa;cursor: pointer" @click="stuConfirmCheckIn(row.id)">确认签到</a>
          <a style="color:#0087fa;cursor: pointer" class="ml-12" @click="stuCancelCheckIn(row.id)">未签到</a>
        </template>
      </Table>
      <div class="w-100  fs-14 d-flex-center" style="height: 70px;background-color:#fff;" :loading="loadingCom">
        <Page
            :total="stuTotal"
            :page-size="studentParams.pageSize"
            :current="studentParams.pageIndex"
            show-elevator
            show-sizer
            class-name="d-flex-center"
            size="small"
            @on-change="handleStudentPageChange"
            @on-page-size-change="handleStudentPageSizeChange"
        />
      </div>
    </div>
    <!--单位-->
    <div v-if="activeTab === 1" v-ref-height="abca" style="height: calc(100% - 170px)" class="mt-12">
      <Table class="overflow-auto-hidden" ref="unitSelections" :height="abca.value" :columns="unitTableColumns" :data="companyList">
        <template slot-scope="{ row }" slot="status">
          <el-link v-if="row.status === 0" type="primary" :underline="false">未处理</el-link>
          <el-link v-if="row.status === 1" type="success" :underline="false">已签到</el-link>
          <el-link v-if="row.status === 2" type="danger" :underline="false">未签到</el-link>
        </template>
        <template slot-scope="{ row }" slot="operation">
          <a style="color:#0087fa;cursor: pointer " @click="unitConfirmCheckIn(row.id)">确认签到</a>
          <a style="color:#0087fa;cursor: pointer " class="ml-12" @click="unitCancelCheckIn(row.id)">未签到</a>
        </template>
      </Table>
      <div class="w-100  fs-14 d-flex-center" style="height: 70px;background-color:#fff;">
        <Page
            :total="unitTotal"
            :page-size="companyParams.pageSize"
            :current="companyParams.pageIndex"
            show-elevator
            show-sizer
            class-name="d-flex-center"
            size="small"
            @on-change="handleCompanyPageChange"
            @on-page-size-change="handleCompanyPageSizeChange"
        />
      </div>
    </div>
    <!--下载签到码-->
    <el-dialog title="下载签到码" :visible.sync="dialogFormVisible">
      <div class=" bor-base-t bor-base-b d-flex flex-column fs-14" style="height: auto;width: auto">
        <div class="d-flex d-flex-around-center" style="height: 350px">
          <!--              <div class="m-12  d-flex flex-column d-flex-center">-->
          <!--                <img src="https://springboot-lcy.oss-cn-hangzhou.aliyuncs.com/img/image-20231208121422321.png" alt="二维码图片" style="width: 245px;height: 225px"/>-->
          <!--                <el-button type="text" @click="downs(1)">下载学生签到码</el-button>-->
          <!--              </div>-->
          <div class="m-12 d-flex flex-column d-flex-center">

<!--            <el-image v-if="activeTab == 1" style="width: 220px;height: auto" src="https://springboot-lcy.oss-cn-hangzhou.aliyuncs.com/img/image-20231208121422321.png"></el-image>-->
<!--            &lt;!&ndash;                <el-button type="text" @click="downs(2)">下载单位签到码</el-button>&ndash;&gt;-->
<!--            <a v-if="activeTab == 1" href="https://springboot-lcy.oss-cn-hangzhou.aliyuncs.com/img/image-20231208121422321.png" download="单位签到码">下载单位签到码</a>-->
              <div v-show="activeTab == 1" id="qrcodeId1" ref="qrcode1"  style="width: 220px;height: auto"></div>
              <div v-show="activeTab == 1" @click="saveQRCode1">下载单位签到码</div>
            <div v-show="activeTab == 2" id="qrcodeId" ref="qrcode"  style="width: 220px;height: auto"></div>
            <div v-show="activeTab == 2" @click="saveQRCode">下载学生二维码</div>
          </div>
        </div>
        <div class="py-12 px-12 ">
          <el-button @click="dialogFormVisible = false" class="ml-12" style="float: right">确定</el-button>
          <el-button @click="dialogFormVisible = false" style="float: right">取消</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  generateQRCodeAPI,
  getCompanyCheckInAPI,
  getStudentCheckInAPI,
  stuNoSignInAPI,
  stuSignInAPI,
  stusNoSignInAPI,
  stusSignInAPI,
  unitNoSignInAPI,
  unitSignInAPI,
  unitsNoSignInAPI,
  unitsSignInAPI
} from '../../../api/bys/recruitmentManagement/index';
import QRCode from "qrcodejs2";
import { stuSignInExportAPI, unitSignInExportAPI } from '@/api/Main/viewDetailsAboutADoubleMeetingApis';
// region TODO tab切换
const activeTab = 1;
// endregion

// region TODO 学生表格

const tableColumns = [
  {
    type: 'selection',
    width: 60
  },
  {
    title: '姓名',
    key: 'nickName'
  },
  {
    title: '性别',
    key: 'gender'
  },
  {
    title: '学校｜专业',
    slot: 'schoolProfession',
    align: 'center'
  },
  {
    title: '学历',
    key: 'degree'
  },
  {
    title: '毕业时间',
    key: 'graduateTime'
  },
  {
    title: '手机号｜邮箱',
    slot: 'contactAddress',
    align: 'center'
  },
  {
    title: '现居住地',
    key: 'currentAddress'
  },
  {
    title: '报名时间',
    key: 'registerTime'
  },
  {
    title: '签到状态',
    slot: 'stustatus',
    align: 'center'
  },
  {
    title: '签到时间',
    key: 'signInTime'
  },
  {
    title: '操作',
    slot: 'operation',
    align: 'center'
  }
];
// endregion
// region TODO 单位表格
const unitTableColumns = [
  {
    type: 'selection',
    width: 60
  },
  {
    title: '单位名称',
    key: 'enterpriseName'
  },
  {
    title: '展位号',
    key: 'boothNumber'
  },
  {
    title: '经办人',
    key: 'attnName'
  },
  {
    title: '联系方式',
    key: 'attnPhone'
  },
  {
    title: '报名时间',
    key: 'registerTime'
  },
  {
    title: '状态',
    slot: 'status',
    align: 'center'
  },
  {
    title: '操作',
    slot: 'operation',
    align: 'center'
  }
];
// endregion

export default {
  data() {
    return {
      imgUrl: '',
      dialogFormVisible: false,
      loadingStu: false,
      loadingCom: false,
      unitTableColumns,
      activeTab,
      tableColumns,
      unitTotal: 0,
      stuTotal: 0,
      studentList: [],
      studentParams: {
        doubleElectionId: '', //双选会id
        status: '全部', //签到管理状态
        search: '', //搜索条件
        pageNumber: 1,
        pageSize: 10,
        sort: '',
        order: ''
      },
      companyParams: {
        doubleElectionId: '', //双选会id
        status: '全部', //签到管理状态
        search: '', //搜索条件
        pageNumber: 1,
        pageSize: 10,
        sort: '',
        order: ''
      },
      companyList: [],
      ids: [],
      queryText: '',
      queryStatus: '全部',
      abca: {
        value: 0
      }
    };
  },
  mounted() {
    this.studentParams.doubleElectionId = this.$route.query.id;
    this.companyParams.doubleElectionId = this.$route.query.id;
    this.getStudentList();
    this.getCompanyList();
  },
  methods: {
      download(){
          // 企业
          if(this.activeTab ===  1){
              this.download2()
          }
          // 学生
          if(this.activeTab ===  2){
              this.download1()
          }

      },
      download1() {
          stuSignInExportAPI({ doubleElectionId: this.studentParams.doubleElectionId }).then(res => {
              this.importing1 = false;
              // type的格式可以可以设置，可以把appcation/json设置进去，然后设置导出的类型
              const blob = new Blob([res], { type: 'charset=utf-8' });
              let url = window.URL.createObjectURL(blob);
              const link = document.createElement('a');
              link.style.display = 'none';
              link.href = url;
              link.setAttribute('download', '学生签到信息.xlsx');
              document.body.appendChild(link);
              link.click();
              document.body.removeChild(link); // 删除节点
              window.URL.revokeObjectURL(url); //释放该 url
          });
      },
      download2() {
          unitSignInExportAPI({ doubleElectionId: this.companyParams.doubleElectionId }).then(res => {
              this.importing1 = false;
              // type的格式可以可以设置，可以把appcation/json设置进去，然后设置导出的类型
              const blob = new Blob([res], { type: 'charset=utf-8' });
              let url = window.URL.createObjectURL(blob);
              const link = document.createElement('a');
              link.style.display = 'none';
              link.href = url;
              link.setAttribute('download', '企业签到信息.xlsx');
              document.body.appendChild(link);
              link.click();
              document.body.removeChild(link); // 删除节点
              window.URL.revokeObjectURL(url); //释放该 url
          });
      },


// 生成企业二维码
      GenerateQRcode1() {
          this.$refs.qrcode1.innerHTML = ''; //清除二维码方法一
          new QRCode(this.$refs.qrcode1, { // 此处的qrcode为上面div的id
              // 前端地址
              //text: 'http://124.70.22.59:9989/#/signInPage',
               text: 'http://hnbysjy.jyt.henan.gov.cn/#/signInPage',
              width: 220,
              height: 220,
              colorDark: "#000000",
              colorLight: "#ffffff",
          });
      },
      saveQRCode1(){
          const qrcode = document.querySelector('#qrcodeId1')
          const canvas = qrcode.querySelector('canvas')
          const imgurl = canvas.toDataURL('image/jpeg')
          const a = document.createElement('a')
          a.href = imgurl
          a.download = '企业签到码.png' // 图片名称
          a.click()
      },
    // 生成学生二维码
    GenerateQRcode() {
      this.$refs.qrcode.innerHTML = ''; //清除二维码方法一
        new QRCode(this.$refs.qrcode, { // 此处的qrcode为上面div的id
          //   小程序扫描普通二维码地址
          text: 'http://test.cosmicoin.cn:8090/singup/signIn?'+this.studentParams.doubleElectionId,
          width: 220,
          height: 220,
          colorDark: "#000000",
          colorLight: "#ffffff",
        });
        console.log('http://hnbysjy.jyt.henan.gov.cn/#/singup/signIn?'+this.studentParams.doubleElectionId)
    },
    saveQRCode(){
      const qrcode = document.querySelector('#qrcodeId')
      const canvas = qrcode.querySelector('canvas')
      const imgurl = canvas.toDataURL('image/jpeg')
      const a = document.createElement('a')
      a.href = imgurl
      a.download = '学生签到码.png' // 图片名称
      a.click()
    },
    generateQRCode() {
      this.dialogFormVisible = true;
      // generateQRCodeAPI().then(res => {
      //   // let blob = new Blob([res.result], {type: 'image/jpeg/png'});
      //   // this.imgUrl = window.URL.createObjectURL(blob);
      //   // console.log(this.imgUrl,'111')
      // });
      if(this.activeTab == 2){
        this.$nextTick(()=>{
          this.GenerateQRcode();
        })
      }
        if(this.activeTab == 1){
            this.$nextTick(()=>{
                this.GenerateQRcode1();
            })
        }
    },

    // region TODO 下载签到码
    // 必须同源(访问的网站域名与服务器域名一致)才能下载
    downs(type) {
      console.log('下载图片');
      var a = document.createElement('a');
      if (type === 1) {
        a.download = name || '签到码-学生';
      }
      if (type === 2) {
        a.download = name || '签到码-单位';
      }
      a.href = this.imgUrl;
      a.click();
    },
    // endregion
    // region TODO 单位签到操作
    unitConfirmCheckIn(id) {
      this.$confirm('您确认为该单位确认签到吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
          .then(() => {
            //确认签到
            unitSignInAPI({
              id: id
            }).then(res => {
              if (res.success) {
                this.$message.success(res.message);
                this.getCompanyList();
              } else {
                this.$message.error(res.message);
              }
            });
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消操作'
            });
          });
    },
    unitCancelCheckIn(id) {
      this.$confirm('您确认将该单位设置为未签到吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
          .then(() => {
            //取消签到
            unitNoSignInAPI({
              id: id
            }).then(res => {
              if (res.success) {
                this.$message.success(res.message);
                this.getCompanyList();
              } else {
                this.$message.error(res.message);
              }
            });
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消操作'
            });
          });
    },
    // endregion
    // region TODO 学生签到操作
    stuConfirmCheckIn(id) {
      this.$confirm('您确认为该单位确认签到吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
          .then(() => {
            //确认签到
            stuSignInAPI({
              id: id
            }).then(res => {
              if (res.success) {
                this.$message.success(res.message);
                this.getStudentList();
              } else {
                this.$message.error(res.message);
              }
            });
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消操作'
            });
          });
    },
    stuCancelCheckIn(id) {
      this.$confirm('您确认将该单位设置为未签到吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
          .then(() => {
            //取消签到
            stuNoSignInAPI({
              id: id
            }).then(res => {
              if (res.success) {
                this.$message.success(res.message);
                this.getStudentList();
              } else {
                this.$message.error(res.message);
              }
            });
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消操作'
            });
          });
    },
    // endregion
    // region TODO 批量签到
    bulkCheckIn() {
      let unitList = [];
      let stuList = [];
      if (this.activeTab === 1) {
        unitList = this.$refs.unitSelections.getSelection();
      }
      if (this.activeTab === 2) {
        stuList = this.$refs.stuSelections.getSelection();
      }
      if (unitList.length > 0 || stuList.length > 0) {
        this.$confirm('您确定将所选都设置为已签到?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
            .then(() => {
              if (this.activeTab === 1) {
                for (let item of unitList) {
                  this.ids.push(item.id);
                }
                unitsSignInAPI({ ids: this.ids }).then(res => {
                  if (res.success) {
                    this.$message.success(res.message);
                    this.getCompanyList();
                  } else {
                    this.$message.error(res.message);
                  }
                });
              }
              if (this.activeTab === 2) {
                for (let item of stuList) {
                  this.ids.push(item.id);
                }
                stusSignInAPI({ ids: this.ids }).then(res => {
                  if (res.success) {
                    this.$message.success(res.message);
                    this.getStudentList();
                  } else {
                    this.$message.error(res.message);
                  }
                });
              }
            })
            .catch(() => {
              this.$message({
                type: 'info',
                message: '已取消操作'
              });
            });
      } else {
        this.$message.warning('请至少选择一条数据！');
      }
    },
    // endregion
    // region TODO 批量取消签到
    cancelCheckInInBulk() {
      let unitList = [];
      let stuList = [];
      if (this.activeTab === 1) {
        unitList = this.$refs.unitSelections.getSelection();
      }
      if (this.activeTab === 2) {
        stuList = this.$refs.stuSelections.getSelection();
      }
      if (unitList.length > 0 || stuList.length > 0) {
        this.$confirm('您确定将所选都设置为未签到?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
            .then(() => {
              if (this.activeTab === 1) {
                for (let item of unitList) {
                  this.ids.push(item.id);
                }
                console.log(this.ids, '选中的数据');
                unitsNoSignInAPI({ ids: this.ids }).then(res => {
                  if (res.success) {
                    this.$message.success(res.message);
                    this.getCompanyList();
                  } else {
                    this.$message.error(res.message);
                  }
                });
              }
              if (this.activeTab === 2) {
                // for(let item of stuList){
                //   this.ids.push(item.id)
                // }
                this.ids = stuList.map(item => item.id);
                console.log(this.ids);
                stusNoSignInAPI({ ids: this.ids }).then(res => {
                  if (res.success) {
                    this.$message.success(res.message);
                    this.getStudentList();
                  } else {
                    this.$message.error(res.message);
                  }
                });
              }
            })
            .catch(() => {
              this.$message({
                type: 'info',
                message: '已取消操作'
              });
            });
      } else {
        this.$message.warning('请至少选择一条数据！');
      }
    },
    // endregion
    // region TODO 导出数据
    exportData() {},
    // endregion
    unitCheckIn(tab) {
      this.activeTab = tab;
    },
    getStudentList() {
      this.loadingStu = true;
      getStudentCheckInAPI(this.studentParams)
          .then(res => {
            if (res.success) {
              if (res.result) {
                console.log(res.result.records, 133333);
                this.studentList = res?.result?.records || [];
                this.stuTotal = res?.result?.total || 0;
                this.loadingStu = false;
              } else {
                this.studentList = [];
                this.stuTotal = 0;
                this.loadingStu = false;
              }
            } else {
              this.loadingStu = false;
            }
          })
          .catch(err => {
            this.loadingStu = false;
          });
    },
    getCompanyList() {
      this.loadingCom = true;
      getCompanyCheckInAPI(this.companyParams)
          .then(res => {
            if (res.success) {
              if (res.result) {
                console.log(res.result.records, 12233);
                this.companyList = res?.result?.records || [];
                this.unitTotal = res?.result?.total || 0;
                this.loadingCom = false;
              } else {
                this.companyList = [];
                this.unitTotal = 0;
                this.loadingCom = false;
              }
            } else {
              this.loadingCom = false;
            }
          })
          .catch(err => {
            this.loadingCom = false;
          });
    },
    search(activeTab) {
      if (activeTab === 2) {
        this.studentParams.status = this.queryStatus;
        this.studentParams.search = this.queryText;
        this.getStudentList();
      }
      if (activeTab === 1) {
        this.companyParams.status = this.queryStatus;
        this.companyParams.search = this.queryText;
        this.getCompanyList();
      }
    },
    // region TODO 分页
    handleStudentPageChange(val) {
      this.studentParams.pageNumber = val;

      //调接口
      this.getStudentList();
    },
    handleStudentPageSizeChange(val) {
      this.studentParams.pageSize = val;
      //调接口
      this.getStudentList();
    },
    handleCompanyPageChange(val) {
      this.companyParams.pageNumber = val;

      //调接口
      this.getCompanyList();
    },
    handleCompanyPageSizeChange(val) {
      this.companyParams.pageSize = val;
      //调接口
      this.getCompanyList();
    }
    // endregion
  }
};
</script>
<style scoped>
.tab-cut {
  color: #0094fa;
  height: 50px;
  line-height: 50px;
  border-bottom: 3px solid #0094fa;
}
</style>
